/**
* Copyright (c) 2018-present, Chen Guodong
* All rights reserved.
*
* @flow
*/
<template>
  <div class="modal-box">
    <p class="title">
      <b class="left">征收房屋面积(平方米)</b>
    </p>
    <ul>
      <li>
        <v-chart style="width: 100%;height: 100%;" auto-resize :options="chart1" />
      </li>
      <li>
        <v-chart style="width: 100%;height: 100%;" auto-resize :options="chart2" />
      </li>
      <li>
        <v-chart style="width: 100%;height: 100%;" auto-resize :options="chart3" />
      </li>
    </ul>
    <p class="mark">征收房屋总面积<b >{{area.total && area.total.toFixed(0)}}</b>平方米</p>
  </div>
</template>
<script>
import ECharts from "vue-echarts";
const getOptions = (color, text, num, total) => {
  if (!num) return {};
  let option = {
    animation: true,
    series: [{
      type: "pie",
      center: ["50%", "50%"], //圆心坐标（div中的%比例）
      radius: ["90%", "75%"], //半径
      x: "0%", // for funnel
      hoverAnimation: false,
      itemStyle: {
        //上层样式
        normal: {
          color: color,
          label: {
            show: true,
            position: "center",
            formatter: "{b}",
            textStyle: {
              baseline: "bottom",
              fontSize: 14
            }
          },
          labelLine: {
            show: false
          }
        }
      }, //graphStyleA,//图形样式 // 当查到的数据不存在（并非为0），此属性隐藏
      data: [{
          name: (num).toFixed(0),
          value: (num / total) * 100,
          itemStyle: {
            //上层样式
            normal: {
              color: color,
              label: {
                show: true,
                position: "center",
                formatter: "{b}",
                textStyle: {
                  baseline: "bottom",
                  fontSize: 14
                }
              },
              labelLine: {
                show: false
              }
            }
          }
        },
        {
          name: text,
          value: 100 - (num / total) * 100,
          itemStyle: {
            normal: {
              color: "#616161",
              label: {
                show: false,
                position: "center",
                textStyle: {
                  baseline: "bottom",
                  fontSize: 14
                }
              },
              labelLine: {
                show: false
              }
            }
            // emphasis: {
            //   //悬浮式样式
            //   color: "rgba( 0,0,0,0)"
            // }
          }
        }
      ]
    }]
  };
  return option;
};

export default {
  props: {
    area: Object
  },
  data() {
    return {
      chart1: getOptions("#39f", "已完成", this.area.signed, this.area.total),
      chart2: getOptions("#fe574d", "进行中", this.area.ingsigned, this.area.total),
      chart3: getOptions("#3cd686", "计划中", this.area.unsigned, this.area.total)
    };
  },
  watch: {
    area: function(data) {
      this.chart1 = getOptions("#39f", "已完成", data.signed, data.total);
      this.chart2 = getOptions("#fe574d", "进行中", data.ingsigned, data.total);
      this.chart3 = getOptions("#3cd686", "计划中", data.unsigned, data.total);
    }
  },
  components: {
    "v-chart": ECharts
  }
};

</script>
<style lang='less' scoped>
@import "../../util/theme.less";


ul {
  width: 100%;
  height: 120px;
  overflow: hidden;
  position: relative;
  .mix-flex-center();
  li {
    flex: 1;
    display: inline-block;
  }
}

.mark {
  font-size: 14px;
  padding: 3px;
  color: @font-regular;
  text-align: center;
  b{
    font-size: 18px;
    font-weight: 500;
    color: @primary;
  }
}

</style>
